<template>
  <div class="header">
        <!-- 左边 -->
        <div class="left">
          <img :src="img" alt="" />
          <!-- <span>影院查询系统</span> -->
        </div>
        <!-- 右边 -->
        <ul class="right">
          <li class="dropdow">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <span>你好，{{role}}</span>
                <img :src="userlogo" alt="" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">个人信息</el-dropdown-item>
                <el-dropdown-item command="b">修改信息</el-dropdown-item>
                <el-dropdown-item command="c">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </div>
</template>

<script>
import img from "@/assets/logo.png";
import user from "@/assets/userlogo.png";
import admin from "@/assets/admin.png";
//引入cookie
import {removeCookie} from '@/utils/cookie'
export default {
  name: "",
  props: [""],
  data() {
    return {
      img:img,
      userlogo:admin,
      role:localStorage.getItem('role')
    };
  },

  components: {},

  computed: {
       
  },

  created() {
    // this.role=localStorage.getItem('role')

  },

  mounted() {
     
  },

  methods: {
    handleCommand(command){
      if(command=='c'){
        removeCookie('token');
        this.$router.go(0)
      }
    },
    
  },
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.header {
  background: white;
  display: flex;
  justify-content: space-between;
  height: 60px;
  width: 100%;
  align-items: center;
  .left {
    // width: 180px;
    height: 100%;
    display: flex;
    align-items: center;
    img {
      height: 90px;
      width: 140px;
    }
    // span {
    //   font-size: 24px;
    //   font-weight: bold;
    // }
  }
  .right {
    flex: 1;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    i {
      fill: #51c332;
    }
    img {
      width: 40px;
      height: 40px;
    }
    .icon {
      width: 55px;
      text-align: center;
      .wxicon {
        width: 24px;
        height: 24px;
        fill: #51c332;
      }
    }
    .tabEle {
      width: 36px;
    }
    .dropdow {
      width: 124px;
      /deep/.el-dropdown-link {
        display: flex;
        align-items: center;
        color: #909399;
      }
    }
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>